
<template>
      <div class="info_mian">
        <t-table
            row-key="index"
            :data="data"
            :columns="columns"
            :stripe="stripe"
            :bordered="bordered"
            :loading="isLoading"
            :hover="hover"
            :table-layout="tableLayout ? 'auto' : 'fixed'"
            :size="size"
            :pagination="pagination"
            :show-header="showHeader"
            cell-empty-content="-"
            resizable
            lazy-load
            @page-change="onPageChange"
            :selected-row-keys="selectedRowKeys"
            maxHeight="100%"
        >
          <template #price="{ row }">
            <span>￥{{ row.price }}</span>
          </template>
          <template #amount="{ row }">
            <span v-if="row.create_type === 2">
              渠道支付
            </span>
            <span v-else>￥{{ row.amount }}</span>
          </template>
          <template #type="{ row }">
            <span v-if="row.type === 1">
              基础套餐
            </span>
            <span v-else-if="row.type===2">
              蓝豆加量包
            </span>
            <span v-else-if="row.type===3">
              设备加量包
            </span>
            <span v-else-if="row.type===4">
              音频模板加量包
            </span>
            <span v-else-if="row.type===5">
              视频模板加量包
            </span>
          </template>
          <template #status="{ row }">
            <span v-if="row.status === 0">
              已取消
            </span>
            <span v-else-if="row.status===1">
              待支付
            </span>
            <span v-else-if="row.status===2">
              已支付
            </span>
          </template>
          <template #create_type="{ row }">
            <span v-if="row.create_type === 1">
              微信支付
            </span>
            <span v-else-if="row.create_type===2">
              渠道支付
            </span>
            <span v-else-if="row.create_type===3">
              支付宝支付
            </span>
          </template>



        </t-table>
      </div>
</template>
<script setup>
import {ref} from "vue";
import {get} from "@/utils/api";
import config from "@/config";

//表格部分
const data = ref([])
const total = 28;


const stripe = ref(true);
const bordered = ref(false);
const hover = ref(false);
const tableLayout = ref(false);
const size = ref('medium');
const showHeader = ref(true);
const isLoading = ref(false);
const selectedRowKeys = ref([]);
const pagination = ref({
  defaultCurrent: 1,
  defaultPageSize: 10,
  total,
});

const columns = ref([

  { colKey: 'order_no', title: '订单号',width: 200, ellipsis: {
      theme: 'light',
      placement: 'bottom'
    }},
  { colKey: 'type', title: '订单类型', ellipsis: {
      theme: 'light',
      placement: 'bottom'
    }},
  { colKey: 'remark', title: '订单内容', ellipsis: {
      theme: 'light',
      placement: 'bottom'
    }},
  // { colKey: 'create_at', title: '时间' },
  { colKey: 'price', title: '单价' },
  { colKey: 'amount', title: '支付金额' },
  { colKey: 'status', title: '订单状态' },
  { colKey: 'create_at', title: '创建时间' },
  { colKey: 'pay_date', title: '支付时间' },
  { colKey: 'create_type', title: '支付方式' },

]);
const getOrderList = (paginationInfo)=>{
  const { current, pageSize } = paginationInfo;
  get(config.getOrderList,{
    page:current,
    page_size:pageSize
  }).then(res=>{
    console.log("getOrderList",res)
    data.value = res.data.data.list
    pagination.value.total = res.data.data.page.total
  })
}
getOrderList({
  current: pagination.value.current || pagination.value.defaultCurrent,
  pageSize: pagination.value.pageSize || pagination.value.defaultPageSize,
})
const onPageChange = async (pageInfo) => {
  console.log('page-change', pageInfo);
  getOrderList(pageInfo);
};

</script>
<style scoped>
.info_mian{
  padding: 20px 30px;
}
.box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info_box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.info_font{
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 60px;
}
.info_font h2{
  font-size: 24px;
  font-weight: 600;
}
.info_font p{
  font-size: 12px;
  color: #adacac;
}
.guarder_box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px;
  background: linear-gradient(122deg, #cad1df 30.56%, #a3a9b5 73.87%);
  padding: 20px;
  border-radius: 10px;
}
.guarder_info{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.guarder_title{
  font-size: 20px;
  font-weight: 600;
  margin-left: 20px;
  line-height: 1.8;
}
.guarder_time{
  font-size: 14px;
  color: #adacac;
}
.member_info_font{
  font-size: 14px;
  color: #adacac;
}
</style>
